{% extends "base.html" %}

{% load i18n page_metadata_tags static %}

{% block metadata %}
    {% translate "Search" as trans_title %}
    {% page_metadata page_title=trans_title %}
{% endblock metadata %}

{% block body_class %}search{% endblock %}

{% block body %}
    <h3>
        Search Packages and Grids
        <span class="htmx-indicator">
            <img src="/img/bars.svg"/> Searching...
        </span>
    </h3>
    <input class="form-control"
           type="search"
           name="search"
           placeholder="Begin Typing To Search Packages..."
           hx-get="/search/v3/"
           hx-trigger="keyup changed delay:250ms, search"
           hx-target="#search-results"
           hx-indicator=".htmx-indicator">

    <table class="table" aria-label="Search Results">
        <thead>
            <tr>
                <th scope="col">{% translate "Search Weight" %}</th>
                <th scope="col">{% translate "Package" %}</th>
                <th scope="col">{% translate "Description" %}</th>
                <th scope="col">{% translate "Last PyPI Release" %}</th>
                {% flag "enabled_packages_score_values" %}
                    <th
                        {% if TEST_MODE %}data-testid="search-results-score-header"{% endif %}
                        scope="col"
                        data-toggle="tooltip"
                        data-placement="top"
                        aria-label="{% translate 'Score' %}"
                        title="{% translate 'Scores (0-100) are based on Repository stars, with deductions for inactivity (-10% every 3 months) and lack of Python 3 support (-30%).' %}"
                    >
                        {% translate "Score" %}
                        <span class="glyphicon glyphicon-stats"></span>
                    </th>
                {% endflag %}
                <th
                    scope="col"
                    data-toggle="tooltip"
                    data-placement="top"
                    aria-label="{% translate 'Number of Stars' %}"
                    title="{% translate 'Number of stars on the Repository.' %}"
                >
                    {% translate "Stars" %}
                    <span class="glyphicon glyphicon-star"></span>
                </th>
                <th
                    scope="col"
                    data-toggle="tooltip"
                    data-placement="top"
                    aria-label="{% translate 'Number of Forks' %}"
                    title="{% translate 'Number of forks on the Repository.' %}"
                >
                    {% translate "Forks" %}
                    <span class="glyphicon glyphicon-random"></span>
                </th>
            </tr>
        </thead>
        <tbody id="search-results">
        </tbody>
    </table>
{% endblock body %}

{% block extra_body %}
    <script src="{% static 'js/htmx.min.js' %}" defer></script>
{% endblock extra_body %}
